<template>
    <Category :flag="flag" />
    <el-card style="margin-top: 10px">
        <div v-if="flag">
            <el-button
                type="primary"
                icon="Plus"
                :disabled="categoryStore.c3Id ? false : true"
                @click="addAttr"
            >
                添加属性
            </el-button>
            <el-table style="margin: 10px 0" border :data="attrList">
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                ></el-table-column>
                <el-table-column
                    label="属性名称"
                    width="200"
                    prop="attrName"
                ></el-table-column>
                <el-table-column label="属性值名称">
                    <template #="{ row }">
                        <el-tag
                            v-for="item in row.attrValueList"
                            :key="item.id"
                            type="success"
                        >
                            {{ item.valueName }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #="{ row }">
                        <el-button
                            type="primary"
                            size="small"
                            icon="Edit"
                            @click="updataAttr(row)"
                        >
                            修改
                        </el-button>

                        <el-popconfirm
                            title="Are you sure to delete this?"
                            @confirm="deleteAttr(row)"
                            @cancel="cancel"
                        >
                            <template #reference>
                                <el-button
                                    type="danger"
                                    size="small"
                                    icon="Delete"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 添加属性和修改属性 -->
        <div v-else style="margin-top: 10px">
            <el-form inline>
                <el-form-item label="属性名称">
                    <el-input
                        placeholder="请输入属性名称"
                        v-model="attrParams.attrName"
                    ></el-input>
                </el-form-item>
            </el-form>
            <el-button
                icon="Plus"
                type="primary"
                :disabled="attrParams.attrName ? false : true"
                @click="addAttrList"
            >
                添加属性
            </el-button>
            <el-button @click="cancel">取消</el-button>
            <el-card style="margin-top: 10px">
                <el-table border :data="attrParams.attrValueList">
                    <el-table-column
                        label="序号"
                        type="index"
                        width="100"
                    ></el-table-column>
                    <el-table-column label="属性值">
                        <template #="{ row, $index }">
                            <el-input
                                v-model="row.valueName"
                                placeholder="请输入属性值"
                                v-if="row.look"
                                @blur="toLook(row, $index)"
                                :ref="(e) => (inputAttr[$index] = e)"
                            ></el-input>
                            <div v-else @click="toEdit(row, $index)">
                                {{ row.valueName }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #="{ row, $index }">
                            <el-button
                                type="danger"
                                icon="Delete"
                                size="small"
                                @click="
                                    attrParams.attrValueList.splice($index, 1)
                                "
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-button
                type="primary"
                @click="save"
                :disabled="attrParams.attrName.length > 0 ? false : true"
            >
                保存
            </el-button>
            <el-button @click="cancel">取消</el-button>
        </div>
    </el-card>
</template>
<script setup lang="ts">
import { watch, ref, reactive, nextTick, onBeforeUnmount } from 'vue';
import { reqAttr } from '@/api/attr';
import type { AttrResponseData, Attr, AttrItem } from '@/api/attr/type';
import useCategoryStore from '@/store/modules/category';
import { reqAddOrUpdateAttr, reqDeleteAttr } from '@/api/attr/index';
import { ElMessage } from 'element-plus';
const categoryStore = useCategoryStore();
const attrList = ref<Attr[]>([]);
// 定义卡片组件内容切换
const flag = ref(true);
const inputAttr = ref<any>([]);
//  收集新增的属性数据
const attrParams = reactive<Attr>({
    attrName: '', // 新增属性名称
    attrValueList: [], //新增属性值
    categoryId: '', //分类 id
    categoryLevel: 3, // 代表三级分类
});
onBeforeUnmount(() => {
    categoryStore.$reset();
});
// 获取当前分类下的详情
watch(
    () => categoryStore.c3Id,
    () => {
        // 清空上一次的数据
        attrList.value = [];
        // 获取当前分类下的详情
        if (!categoryStore.c3Id) return;
        getAttr();
    },
);

const getAttr = async () => {
    const { c1Id, c2Id, c3Id } = categoryStore;
    const res: AttrResponseData = await reqAttr(c1Id, c2Id, c3Id);

    attrList.value = res.data;
};
// 添加属性
const addAttr = () => {
    attrParams.categoryId = categoryStore.c3Id;
    flag.value = false;
    attrParams.attrName = '';
    attrParams.attrValueList = [];
    attrParams.categoryId = '';
};
const updataAttr = (row: Attr) => {
    flag.value = false;
    console.log(row);
    Object.assign(attrParams, JSON.parse(JSON.stringify(row)));
    // 深拷贝
    // attrParams.attrName = row.attrName
    // attrParams.attrValueList = row.attrValueList.map((item) => {
    //     return {
    //         ...item,
    //         look: false
    //     }
    // })
};
const cancel = () => {
    flag.value = true;
};
const deleteAttr = async (row: Attr) => {
    // console.log(row.attrValueList[0].attrId);
    console.log('row', row);
    const res = await reqDeleteAttr(row.id);
    if (res.code === 200) {
        getAttr();
        ElMessage.success('删除成功');
    }
};
// 添加属性值
const addAttrList = () => {
    attrParams.attrValueList.push({
        valueName: '',
        look: true,
    });
    nextTick(() => {
        inputAttr.value[attrParams.attrValueList.length - 1].focus();
    });
};
// 保存
const save = async () => {
    const res = await reqAddOrUpdateAttr(attrParams);
    if (res.code === 200) {
        getAttr();
        flag.value = true;
    }
};
const toLook = (row: AttrItem) => {
    if (row.valueName.trim() === '') {
        ElMessage.error('属性值不能为空');
        return;
    }
    //    判断是否重复
    const isRepeat = attrParams.attrValueList.some((item) => {
        if (item !== row) return item.valueName === row.valueName;
    });
    if (isRepeat) {
        ElMessage.error('属性值不能重复');
        return;
    }
    row.look = false;
};

const toEdit = (row: AttrItem, index: number) => {
    row.look = true;
    nextTick(() => {
        inputAttr.value[index].focus();
    });
};
</script>

<style scoped lang="scss"></style>
